<template>
	<div>
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label=""><el-input placeholder="文章标题" v-model="inputTitle"></el-input></el-form-item>
			<el-form-item label=""><el-date-picker v-model="timeValue" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker></el-form-item>
			<el-form-item><el-button type="primary" @click="searchSomthing">查询</el-button></el-form-item>
		</el-form>
		<datatable :datalist="tableData" :currentPage="currentPage" :limit="limit"></datatable>
		<el-pagination layout="total, prev, pager, next" @current-change="pageNumberChange" :page-size="limit" :pager-count="5" :total="total"></el-pagination>
	
	</div>
	
</template>

<script>
import datatable from '../../components/DataTable.vue';
import Table from '@/apis';
export default {
	name: 'Content',
	data() {
		return {
			inputTitle: '',
			timeValue: '',
			tableData: [],
			currentPage: 1,
			total: 0,
			limit: 20,
			expertsData: []
		};
	},

	components: {
		datatable
	},
	created() {
		this.searchSomthing();
	},
	methods: {
		// 查询按钮绑定的方法
		searchSomthing() {
			this.currentPage = 1;
			this.getPageDataCondition();
			this.getExpertByPage();
		},
		// 条件分页查询
		async getPageDataCondition(page = 1) {
			this.timeValue = this.timeValue == null ? '' : this.timeValue;
			console.log(this.timeValue);
			return await Table.getDataByPageWithCondition(page, this.limit, this.inputTitle.trim(), this.timeValue.trim()).then(res => {
				this.tableData = res.data.data;
				this.total = res.data.total;
			});
		},
		// 分页条页码改变响应事件
		pageNumberChange(val) {
			this.currentPage = val;
			this.getPageDataCondition(val);
		},
		async getExpertByPage() {
			return await Table.getExpertByPage(1, 5).then(res => {
				this.expertsData = res.data.data;
			});
		}
	}
};
</script>

<style></style>
